<template>

    <div>

        <el-form ref="form">
            <el-form-item>
                <el-switch
                        v-model="showCode"
                        active-text="原码"
                        inactive-text="编辑框">
                </el-switch>
                <el-button size="small" type="default" @click="extractImage">提取图片</el-button>
            </el-form-item>

            <el-form-item v-if="!showCode">
                <vue-editor v-model="html" style="width: 480px" :editorToolbar="customToolbar"></vue-editor>
            </el-form-item>
            <el-form-item v-if="showCode">
                <el-input type="textarea" :rows="12" v-model="html" @change="handleChange"></el-input>
            </el-form-item>

        </el-form>

    </div>
</template>

<style scoped>
    .phone {
        border:2px solid #000;
        width: 480px;
        height: 560px;
        overflow-y: auto;
    }
</style>

<script>
  import { VueEditor } from 'vue2-editor'
  export default {
    components: {
      VueEditor
    },
    props: {
      value: String
    },
    data() {
      return {
        fullSize: false,

        customToolbar: [
          //[{ 'font': [] }],

          //[{ 'header': [false, 1, 2, 3, 4, 5, 6, ] }],

          //[{ 'size': ['small', false, 'large', 'huge'] }],

          ['bold', 'italic', 'underline', 'strike'],

          [{'align': ''}, {'align': 'center'}, {'align': 'right'}, {'align': 'justify'}],

          [{ 'header': 1 }, { 'header': 2 }],

          //['blockquote', 'code-block'],

          [{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],

          //[{ 'script': 'sub'}, { 'script': 'super' }],

          [{ 'indent': '-1'}, { 'indent': '+1' }],

          [{ 'color': [] }, { 'background': [] }],

          ['link', 'video', 'formula'],

          //[{ 'direction': 'rtl' }],
          ['clean'],
        ],

        html: '',

        showCode: false,

        loading: false
      }
    },

    created() {
      this.html = this.value;
    },

    methods: {

      // 将html中的图片摘取并插入至图片内容
      extractImage() {
        let imgReg = /<img.*?(?:>|\/>)/gi;
        //匹配src属性
        let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
        let arr = this.html.match(imgReg);
        let images = [];
        if (!arr) {
          return images;
        }
        for (let i = 0; i < arr.length; i++) {
          let src = arr[i].match(srcReg);
          images.push(src[1]);
        }
        console.log(images);
        return images;
      },

      uploadInternetImage(images, callback) {
        this.loading = true;
        axios.post('/upload_from_url', {images: images}).then((res) => {
          if (res.data.code === 0) {
            callback(res.data.data);
          } else {
            this.$message.info('网络图片下载失败，将使用原始链接');
            callback(images);
          }
          this.loading = false;
        }).catch((_) => {
          callback(images);
          this.loading = false;
        })
      },

      handleChange()
      {
        this.$emit('input', this.html);
      }

    },
    watch: {
      value(val) {
        this.html = val;
      }
    }
  }
</script>